import React, { Component, useMemo, useState } from "react";
import { View, Image, Text, Button } from "@tarojs/components";
import Taro from "@tarojs/taro";

import styles from "./index.module.scss";
import MiniHeader from "@/components/UI/MiniHeader";
import useDebounceFn from "ahooks/lib/useDebounceFn";
import cn from "@/utils/classnames";

export default function() {
  let [title, setTitle] = useState("SDS兴趣倾向测评");
  let [curIndex, setCurIndex] = useState(0);
  let [status, setStatus] = useState(0); // 0 未作答 1 作答中 2 已提交
  let questions = [1, 2];
  let [answers, setAnswers] = useState(5);
  const { run } = useDebounceFn(
    () => {
      setCurIndex(curIndex + 1);
    },
    {
      wait: 2000,
    },
  );
  return (
    <View className={styles.page}>
      <MiniHeader
        title={status != 1 ? title : `${curIndex + 1}/${questions.length}`}
        transparent={false}
        hideHome
      ></MiniHeader>
      <View className={styles.pageContent}>
        {status !== 1 ? (
          <View key={status} className={styles.noAnswer}>
            <View className={styles.noAnswerContent}>
              <View className={styles.title}>热爱指引我们前行</View>
              <View className={styles.subTitle}>SDS兴趣倾向测评</View>
              <View className={styles.desc}>
                <View className={styles.descTitle}>测评说明</View>
                <View className={styles.descP}>1.测评须学生本人作答; 。</View>
                <View className={styles.descP}>2.测评试题无好坏、对错之分，请根据真实想法作答;</View>
                <View className={styles.descP}>3.请根据第一印象作答，无需过多思考，也无需考虑自己或外界期望;</View>
                <View className={styles.descP}>4.请一次性完成测评，答题期间保持环境安静、心态平和;</View>
                <View className={styles.descP}>5.本测评共60题，一般需要5分钟</View>
              </View>
            </View>
            <View
              className={styles.noAnswerBtn}
              onClick={() => {
                if (status == 0) {
                  setStatus(1);
                }
              }}
            >
              开始测评
            </View>
          </View>
        ) : (
          <View key={status} className={styles.questionWrap}>
            <View className={styles.questionTitle}>第二部分：你是否喜欢从事以下职业？</View>
            <View className={styles.questionContent}>
              <View className={styles.questionSubTitle}>109.中小学老师</View>
              {[1, 2, 3, 4].map(item => {
                return (
                  <View
                    key={item}
                    className={cn(styles.questionItem, {
                      [styles.select]: item === answers,
                    })}
                    onClick={() => {
                      setAnswers(item);
                      if (curIndex + 1 >= questions.length) return;
                      run();
                    }}
                  >
                    A. 是
                  </View>
                );
              })}
              {curIndex + 1 >= questions.length && (
                <View className={cn(styles.questionBtn, { [styles.active]: true })}>提交</View>
              )}
            </View>
          </View>
        )}
      </View>
    </View>
  );
}
